/* global */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: unset !important;
  font-size: 20px;
  text-align: justify;
  text-justify:inter-ideograph;
}

body {
  min-width: 1300px;
  background-color: #e9eaea;
  /* font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; */
  /* font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; */
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

p {
  margin: 0 !important;
}


/* header */

.header--height {
  height: 55px;
}

.layout--width {
  width: 1000px;
}

@media screen and (max-width: 768px) {
  .layout--width {
    width: unset;
  }
}

.logo {
  position: relative;
  display: block;
  transform: scale(1);
  cursor: pointer;
  transition: transform 1s ease;
  line-height: 55px;
  -moz-transition: transform 1s ease;
  /* Firefox 4 */
  -webkit-transition: transform 1s ease;
  /* Safari 和 Chrome */
  -o-transition: transform 1s ease;
}

.logo img {
  vertical-align: 0;
  margin-top: 3px;
}

@media screen and (max-width: 768px) {
  .logo img {
    padding-left: 1rem;
  }
}

.logo:before {
  position: absolute;
  top: -15px;
  right: 300px;
  bottom: 8px;
  left: -40px;
  content: "";
}

.logo:hover {
  /* transform: scale(1.1); */
}


/* nav */

.navigation {
  background-color: rgba(75, 73, 72, 1);
  z-index: 9999;
}

.nav--height {
  height: 25px;
  padding: 0;
}

.nav--list {
  font-family: "Microsoft YaHei";
  padding: 0 !important;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 1.4px;
  color: #e9eaea !important;
  margin-right: 36px;
}

.nav--list:hover {
  color: #fff !important;
  font-weight: bold;
}

.activePage {
  color: #fff !important;
  font-weight: bold !important;
}

@media screen and (max-width: 768px) {
  .nav--list {
    margin-left: 1rem !important;
    line-height: 36px;
    z-index: 9999;
  }
  .nav--address {
    padding-right: 1rem;
  }
  .nav--font {
    background-color: rgba(75, 73, 72, .7);
  }
  .navbar-toggler {
    padding: 0 !important;
    padding-left: 1rem !important;
    font-size: unset !important;
  }
}


/* footer */

.copyright {}

.credential {}

.address {}

@media screen and (max-width: 768px) {
  .copyright {
    padding: 0 5px;
  }
  .credential {
    padding: 0 5px;
  }
  .address {
    padding: 0 5px;
  }
}


/* 屏幕宽度 => 1200px */

@media screen and (min-width: 1200px) {
  html {
    font-size: 24px;
  }
}


/* 屏幕宽度 => 992px 和 < 1200px */

@media screen and (max-width: 1368px) {
  html {
    font-size: 20px;
  }
  .el-header--height {
    height: 50px !important;
  }
}


/* 屏幕宽度 => 768px 和 < 992px */

@media screen and (max-width: 992px) {
  html {
    font-size: 16px;
  }
  img {
    max-width: 100%;
  }
}


/* 屏幕宽度 < 768px */

@media screen and (max-width: 768px) {
  html {
    font-size: 12px;
  }
  body {
    min-width: unset;
    font-size: 10px;
  }
}

@media (min-width: 576px) {}


/* service */

.service__main--logo2>p {
  font-size: 0.8em;
  line-height: 33.75px;
  color: #595757;
}

.service__main--logo2 {
  margin-top: 10px;
}

.service__main--logo1>div>p:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1em;
  letter-spacing: 1.2px;
  color: #fff;
}

.service__main--logo1>div>p:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.5em;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: #fff;
}

.service__main--logo1:after {
  content: '';
  width: 0;
  height: 0;
  border: solid transparent;
  left: 48%;
  top: 100%;
  position: absolute;
  border-width: 0.5em;
  border-top-color: #b0b1b1;
}

.service__main--logo1.change:after {
  border-top-color: #b91b22;
}

.service__main--logo1:hover {
  background-color: #b91b22;
}

.service__main--logo1 {
  position: relative;
  width: 243px;
  height: 82px;
  background-color: #b0b1b1;
}

.service__main--logo {
  margin-bottom: 0.8em;
  width: 243px;
  height: 301px;
  background-color: #fff;
}

.service__main {
  justify-content: space-between
}

.service__bg {
  height: 361px;
}

.service__bg--slogan {
  position: absolute;
  top: 69px;
  left: calc(50% - 500px);
}

.service__bg--slogan>p>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 2em;
  text-transform: uppercase;
  color: #fff;
}

.service__bg--slogan>p>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 1.6em;
  color: #E60012;
  vertical-align: text-bottom;
}

.service__bg--slogan>span {
  font-family: "Microsoft YaHei";
  font-size: 0.8em;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .service__bg {
    height: unset;
  }
  .service__bg--slogan {
    position: absolute;
    top: 20px;
    left: 10px;
  }
  .service__main {
    justify-content: space-around;
  }
}


/* creative */

.creative__main1 {
  margin-top: 20px;
  height: 323px;
}

.creative__main2 {
  height: 323px;
  margin-top: 15px;
}

.creative__planning {
  margin: 0 -16px;
  margin-top: -40px;
}

.creative__planning>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1em;
  letter-spacing: 1.2px;
  color: #D71518;
}

.creative__planning>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.5em;
  letter-spacing: 3.1px;
  text-transform: uppercase;
  color: #231815;
}

.creative__planning>span:nth-child(3) {
  font-size: 0.7em;
  line-height: 18.7px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative__planning>span:nth-child(4) {
  font-size: 0.6em;
  line-height: 17px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative__painting>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1em;
  letter-spacing: 1.2px;
  color: #D71518;
  text-align: right;
}

.creative__painting>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.5em;
  letter-spacing: 3.1px;
  text-transform: uppercase;
  color: #231815;
  text-align: right;
}

.creative__painting>span:nth-child(3) {
  font-size: 0.7em;
  line-height: 18.7px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative__painting>span:nth-child(4) {
  font-size: 0.7em;
  line-height: 17px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative__idea>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1em;
  letter-spacing: 1.2px;
  color: #D71518;
}

.creative__idea>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.5em;
  letter-spacing: 3.1px;
  text-transform: uppercase;
  color: #231815;
}

.creative__idea>span:nth-child(3) {
  font-size: 0.7em;
  line-height: 18.7px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative__idea>span:nth-child(4) {
  font-size: 0.7em;
  line-height: 17px;
  letter-spacing: -0.14px;
  color: #595757;
}

.creative {
  width: calc(100% - 641px);
  height: 323px;
  padding: 50px;
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .creative {
    width: unset;
    height: unset;
  }
  .creative__main1 {
    height: unset;
  }
  .creative__main2 {
    height: unset;
  }
}


/* about */

.about__about--contact>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1.3em;
  letter-spacing: 1.56px;
  color: #D71518;
}

.about__about--contact>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.7em;
  letter-spacing: 4.34px;
  text-transform: uppercase;
  color: #231815;
}

.about__about--contact>span:nth-child(3) {
  font-size: 0.7em;
  line-height: 22px;
  letter-spacing: -0.35px;
  /* text-transform: uppercase; */
  color: #595757;
}

.about__about--contact {
  width: 400px;
  height: 223px;
  margin-right: 55px;
}

.about__about--about>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-size: 1.3em;
  letter-spacing: 1.56px;
  color: #D71518;
}

.about__about--about>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 0.7em;
  letter-spacing: 4.34px;
  text-transform: uppercase;
  color: #231815;
}

.about__about--about>span:nth-child(3) {
  font-size: 0.7em;
  line-height: 22px;
  letter-spacing: -0.35px;
  text-transform: uppercase;
  color: #595757;
}

.about__about--about {
  width: 400px;
  height: 305px;
  margin-right: 55px;
}

.about__about {
  width: calc(100% - 545px);
}

.about__bg {
  position: relative;
  width: 100%;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .about__about {
    width: unset;
  }
  .about__about--contact {
    width: 400px;
    height: unset;
    margin-right: 55px;
    margin-bottom: 30px;
  }
  .about__about--about {
    width: 400px;
    height: unset;
    margin-right: 55px;
    margin-bottom: 30px;
  }
}

/* Index */

.main__footer>div {
  color: #E60012;
  font-size: 11px;
  line-height: 27px;
  color: #231815;
  font-weight: 400;
  font-family: "Microsoft YaHei";
}

.main__footer {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.main__footer .layout--width {
  border-top: 2px solid #9a9999;
}

.main__vendor--logo {
  margin-bottom: 0.8em;
  width: 189px;
  height: 109px;
  background-color: #c9c9ca;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
}

.main__vendor--logo:hover {
  background-color: #fff;
}

.main__bg {
  height: 361px;
}

.main__bg--slogan {
  position: absolute;
  top: 69px;
  left: calc(50% - 500px);
}

.main__bg--slogan>p>span:nth-child(1) {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 2em;
  text-transform: uppercase;
  color: #231815;
}

.main__bg--slogan>p>span:nth-child(2) {
  font-family: "Microsoft YaHei";
  font-size: 1.6em;
  color: #E60012;
  vertical-align: text-bottom;
}

.main__bg--slogan>span {
  font-family: "Microsoft YaHei";
  font-size: 0.8em;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #231815;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 25px !important;
  height: 25px !important;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-2 2 2 2 0.5-0.5-1.5-1.5 1.5-1.5-0.5-0.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-0.5 0.5 1.5 1.5-1.5 1.5 0.5 0.5 2-2-2-2z'/%3E%3C/svg%3E") !important;
}

@media screen and (max-width: 768px) {
  .main__bg {
    height: unset;
  }
  .main__bg--slogan {
    position: absolute;
    top: 20px;
    left: 10px;
  }
}

.sprite {
  background-image: url(../images/maeno/v2/main/spritesheet.png);
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  position: relative;
}

.sprite-a0:before {
  position: absolute;
  top: -30px;
  right: -48px;
  bottom: -30px;
  left: -48px;
  content: "";
}

.sprite-a0 {
  width: 92px;
  height: 50px;
  background-position: -5px -5px;
}

.sprite-a0:hover {
  width: 92px;
  height: 50px;
  background-position: -5px -65px;
}

.sprite-a1:before {
  position: absolute;
  top: -35px;
  right: -19px;
  bottom: -35px;
  left: -19px;
  content: "";
}

.sprite-a1 {
  width: 152px;
  height: 39px;
  background-position: -5px -125px;
}

.sprite-a1:hover {
  width: 152px;
  height: 39px;
  background-position: -5px -174px;
}

.sprite-a2:before {
  position: absolute;
  top: -43px;
  right: -25px;
  bottom: -43px;
  left: -25px;
  content: "";
}

.sprite-a2 {
  width: 140px;
  height: 23px;
  background-position: -5px -223px;
}

.sprite-a2:hover {
  width: 140px;
  height: 23px;
  background-position: -5px -256px;
}

.sprite-a3:before {
  position: absolute;
  top: -37px;
  right: -37px;
  bottom: -37px;
  left: -37px;
  content: "";
}

.sprite-a3 {
  width: 115px;
  height: 34px;
  background-position: -5px -289px;
}

.sprite-a3:hover {
  width: 115px;
  height: 34px;
  background-position: -5px -333px;
}

.sprite-a4:before {
  position: absolute;
  top: -31px;
  right: -24px;
  bottom: -31px;
  left: -24px;
  content: "";
}

.sprite-a4 {
  width: 140px;
  height: 47px;
  background-position: -5px -377px;
}

.sprite-a4:hover {
  width: 140px;
  height: 47px;
  background-position: -5px -434px;
}

.sprite-a5:before {
  position: absolute;
  top: -33px;
  right: -38px;
  bottom: -33px;
  left: -38px;
  content: "";
}

.sprite-a5 {
  width: 112px;
  height: 43px;
  background-position: -5px -491px;
}

.sprite-a5:hover {
  width: 112px;
  height: 43px;
  background-position: -5px -544px;
}

.sprite-a6:before {
  position: absolute;
  top: -41px;
  right: -31px;
  bottom: -41px;
  left: -31px;
  content: "";
}

.sprite-a6 {
  width: 127px;
  height: 27px;
  background-position: -5px -597px;
}

.sprite-a6:hover {
  width: 127px;
  height: 27px;
  background-position: -5px -634px;
}

.sprite-a7:before {
  position: absolute;
  top: -43px;
  right: -26px;
  bottom: -43px;
  left: -26px;
  content: "";
}

.sprite-a7 {
  width: 137px;
  height: 23px;
  background-position: -5px -671px;
}

.sprite-a7:hover {
  width: 137px;
  height: 23px;
  background-position: -5px -704px;
}

.sprite-a8:before {
  position: absolute;
  top: -42px;
  right: -25px;
  bottom: -42px;
  left: -25px;
  content: "";
}

.sprite-a8 {
  width: 138px;
  height: 25px;
  background-position: -5px -737px;
}

.sprite-a8:hover {
  width: 138px;
  height: 25px;
  background-position: -5px -772px;
}

.sprite-a9:before {
  position: absolute;
  top: -41px;
  right: -16px;
  bottom: -41px;
  left: -16px;
  content: "";
}

.sprite-a9 {
  width: 156px;
  height: 26px;
  background-position: -5px -807px;
}

.sprite-a9:hover {
  width: 156px;
  height: 26px;
  background-position: -5px -843px;
}


/* 引用外部下载的字体CopperplateGothic */


/* @font-face {
    font-family: "copperplate_gothic";
    src: url("../copperplateGothic/copperplategothic-webfont.eot");
    src: url("../copperplateGothic/copperplategothic-webfont.eot?#iefix")
        format("embedded-opentype"),
      url("../copperplateGothic/copperplategothic-webfont.woff2")
        format("woff2"),
      url("../copperplateGothic/copperplategothic-webfont.woff")
        format("woff"),
      url("../copperplateGothic/copperplategothic-webfont.ttf")
        format("truetype"); */


/* url("../assets/copperplategothic-webfont.svg#copperplate_gothic_boldRg") format("svg"); */


/* font-weight: bold; */


/* } */